<template>
  <!--可收起/展开的卡片组件，自定义title信息 -->
  <div class="design-card">
    <el-card shadow="never">
      <el-row :gutter="20" type="flex" align="center" justify="space-between" style="margin:16px 0" v-if="isShow">
        <el-col>
          <span class="design-card-title">{{title}}</span>
          <span v-if="!isExpand && showExpand" @click="handleCommand" class="design-card-expand">
            <i class="el-icon-arrow-down el-icon--left"></i>
            {{ $t("message.unfold") }}
          </span>
          <span v-if="isExpand && showExpand" @click="handleCommand" class="design-card-expand">
            <i class="el-icon-arrow-up el-icon--left"></i>
            {{ $t("message.fold") }}
          </span>
        </el-col>
      </el-row>
      <div v-show="isExpand" class="design-card-slot">
        <slot></slot>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  name: 'designCard',
  props: {
    title: {
      type: String,
      default: '基本信息'
    },
    // 是否显示收起 展开
    showExpand: {
      type: Boolean,
      default: true
    },
    // 是否显示 标题信息
    isShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isExpand: true
    };
  },
  methods: {
    handleCommand() {
      this.isExpand = !this.isExpand;
    }
  }
}
</script>
<style lang="scss" scoped>
.design-card {
    .design-card-title {
        color: #2b3b4e;
        font-size: 18px;
        line-height: 24px;
        font-weight: bold;
    }
    .design-card-expand {
        color: #3a7fe8;
        font-size: 14px;
        cursor: pointer;
        margin-left: 10px;
    }
}
</style>